<template>
	<view>
		<view class="s-header">
			<view class="s-rolling-search" @tap="search">
				<s-icon name="sousuo" color="#999" :size="44" unit="rpx"></s-icon>
				<swiper vertical autoplay circular interval="8000" class="s-swiper">
					<swiper-item class="s-swiper-item">
						<view class="s-hot-item">{{$s.config.getConfig('PleaseEnterTheName')}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<view>
			<view class="s-header-banner" v-if="baner_list.length>0">
				<view class="s-banner-bg">
					<view class="s-primary-bg s-route-left"></view>
					<view class="s-primary-bg s-route-right"></view>
					<!--banner-->
					<view class="s-banner-box">
						<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="s-banner-swiper"
						 :circular="true" indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff">
							<swiper-item v-for="(item,index) in baner_list" :key="item.id" @tap="baner_click(item)">
								<image :src="item.image_url" class="s-slide-image" mode="scaleToFill" />
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view> 
			<view class="margin_top"></view>
			<!-- #ifdef MP-WEIXIN -->
			<official-account></official-account>
			<view class="s-padding">
				<s-list-cell :arrow="true" padding="0" :lineLeft="false" @click="live_list">
					<view class="s-cell-header">
						<view class="s-cell-title">直播中心</view>
						<view class="s-cell-sub">查看往期直播</view>
					</view>
				</s-list-cell>
				<c-live-list :list="pic_list"></c-live-list>
			</view>
			<!-- #endif -->
			
			<view class="content-s"> 
				<view class="s-product-box">
					<s-divider dividerColor="#000000" width="60%" color="#000000" :size="32">{{$s.config.getConfig('PopularRecommend')}}</s-divider>
				</view>		
			</view>
			<c-product-list :list="product_list"></c-product-list>
		</view>
		<s-no-data v-if="product_list.length<=0&&moreData===false" :fixed="false" :imgUrl="$s.config.getConfig('NoDataImgUrlA')">
			{{$s.config.getConfig('NoDataTitle')}}
		</s-no-data>
		<s-loadmore v-if="moreData"></s-loadmore>
		<s-nomore v-if="product_list.length>0&&moreData===false"></s-nomore>
		<s-scroll-top :scrollTop="scrollTop"></s-scroll-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				paging:null,
				moreData:true,
				product_list:[],//商品列表
				baner_list:[] ,//轮播图
				pic_list:[],// 广告图
			}
		},
		async onLoad(){
			await this._onLoad()
		},
		methods: {
			//默认方法
			async _onLoad(){
				const data = await this.$s.model.picture.getBanner()
				this.baner_list = data.baner_list
				this.pic_list = data.pic_list
				await this.getProduct()
				await this.$s.model.cart.getCartSum()
			},
			async getProduct(){
				const paging =  this.$s.model.product.getProduct()
				this.paging = paging
				const res = await paging.getMoreData()
				if (!res) {
					return
				}
				this.product_list = res.accumulator
				this.moreData = res.moreData
			},
			// 跳转搜索页
			async search(){
				return await this.$s.uniApi.navigateTo({url:'../search/search'});
			},
			// 跳转baner详情
			async baner_click(item){
				if(item.the_jump == 0){
					return;
				}else if(item.the_jump == 1){
					return await this.$s.uniApi.navigateTo({url:'../out/out?url='+item.url});
				}else if(item.the_jump == 2){
					
					return await this.$s.uniApi.navigateTo({url:item.url})
				}else if(item.the_jump == 3){
					return await this.$s.uniApi.navigateTo({url:'../swiper_detail/swiper_detail?id='+item.id});
				}
			},
			// 广告位跳转
			async pic_click(item){
				if(item.the_jump == 0){
					return;
				}else if(item.the_jump == 1){
					return await this.$s.uniApi.navigateTo({url:'../out/out?url='+item.url});
				}else if(item.the_jump == 2){
					let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 }))
					return await this.$s.uniApi.navigateTo({url:item.url+"custom_params="+customParams})
				}else if(item.the_jump == 3){
					return await this.$s.uniApi.navigateTo({url:'../swiper_detail/swiper_detail?id='+item.id});
				}
			},
			// 广告查看详情
			async pic_detall(item){
				return await this.$s.uniApi.navigateTo({url:'../pic_detall/pic_detall?id='+item.id})
			},
			// 跳转主播列表
			async live_list(){
				return await this.$s.uniApi.navigateTo({url:'../live_list/live_list'})
			}
		},
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		//下拉刷新
		async onPullDownRefresh() {
			await this._onLoad() 
			uni.stopPullDownRefresh()
		},
		//上拉加载更多
		async onReachBottom() {
			const res = await this.paging.getMoreData()
			if(!res){
				return
			}
			this.product_list = res.accumulator
			this.moreData = res.moreData
		},
		// 分享
		onShareAppMessage(res) {
			return this.$s.uniApi.onShareAppMessage({})
		}
	}
</script>
<style lang="scss" scoped>
@import 'index.scss';
</style>